<template>
    <div>
        <div class="header_top">
            <div class="mark_head">
                <span class="ant-card-head">客户统计看板</span>
                <span class="time">日期:{{ currentDate() }}</span>
                <el-button style="float: right; padding: 4px 0" type="text" @click="refresh()">
                    <i class="el-icon-refresh-right"></i> 刷新
                </el-button>
                <!--                <el-button @click="search()" style="float: right; padding: 3px 0" type="text">-->
                <!--                  <i class="el-icon-refresh-right"></i> 搜索-->
                <!--                </el-button>-->
                <PersButton icon="el-icon-search" label="搜索" perms="scrm:client:count:see"
                            style="float: right; padding: 5px 0; font-size:13px"
                            type="text"
                            @click='search()'></PersButton>

                <el-select v-model="form.assistant" placeholder="请选择" size="mini" style="float: right;">
                    <el-option v-for="item in assistantData" :key="item.userid" :label="item.name"
                               :value="item.userid">
                    </el-option>
                </el-select>
                <span class="ant-card-head" style="float: right; padding: 1px 10px">员工:</span>

                <PersButton icon="el-icon-search" label="搜索全部" perms="scrm:client:count:seeall"
                            style="float: right; padding: 5px 10px; font-size:13px"
                            type="text"
                            @click='search1()'></PersButton>

                <el-date-picker
                    v-model="form.createTime"
                    :default-time="['00:00:00', '23:59:59']"
                    :picker-options="pickerOptions"
                    align="right"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd"
                    range-separator="至"
                    size="mini"
                    start-placeholder="开始日期"
                    style="float: right; padding: 3px 0"
                    type="daterange"
                    unlink-panels
                    value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
                <span class="ant-card-head" style="float: right; padding: 1px 10px">日期:</span>
                <span style="float: right; padding: 3px 0;color: red;"></span>
            </div>
        </div>

        <div class="screen_data">
            <el-row :gutter="15">
                <el-col :span="5" style="margin-left: 3%">
                    <el-card class="flex-column item-box">
                        <img src="@/assets/img/gkrs.png">
                        <div class="flex flex-column-center">
                            <span class="t1">客户总数</span>
                        </div>
                        <span class="t2">{{ dataList.kcount }}</span>
                    </el-card>
                </el-col>
                <el-col :span="5" style="margin-left: 3%">
                    <el-card class="flex-column item-box">
                        <img src="@/assets/img/gkrs.png">
                        <div class="flex flex-column-center">
                            <span class="t1">新增客户数</span>
                        </div>
                        <span class="t2">{{ dataList.xcount }}</span>
                    </el-card>
                </el-col>
                <el-col :span="5" style="margin-left: 3%">
                    <el-card class="flex-column item-box">
                        <img src="@/assets/img/gkrs.png">
                        <div class="flex flex-column-center">
                            <span class="t1">流失客户数</span>
                        </div>
                        <span class="t2">{{ dataList.lcount }}</span>
                    </el-card>
                </el-col>
                <el-col :span="5" style="margin-left: 3%">
                    <el-card class="flex-column item-box">
                        <img src="@/assets/img/gkrs.png">
                        <div class="flex flex-column-center">
                            <span class="t1">删除客户数</span>
                        </div>
                        <span class="t2">{{ dataList.scount }}</span>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <div id="trendChart" ref="trendChart" style="width: 100%; height: 450px; background: #fff;"></div>
    </div>
</template>

<script>
import PersButton from "@/components/PersButton.vue";


import * as echarts from 'echarts';
import {clientCount} from '@/api/scrm/client/clientList';
import {getAssistant} from '@/api/scrm/client/clientList';

export default {
    name: 'TrendChart',
    components: {PersButton},
    data() {
        return {
            form: {
                createTime: [],
                assistant: '',
                type: true,
            },
            dataList: [],
            timelist: [],
            assistantData: [],
            todayStart: '',
            todayEnd: '',
            userName: '',
            pickerOptions: {
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            const current = new Date();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + current.getDate(); //年月日
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month).getTime());
                            end.setTime(new Date(month + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const current = new Date();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-' + (current.getDate() - 1); //年月日
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month).getTime());
                            end.setTime(new Date(month + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '上一周',
                        onClick(picker) {
                            const current = new Date();
                            const start_day = current.getDate() - current.getDay() - 6;
                            const end_day = current.getDate() - current.getDay();
                            const month = current.getFullYear() + '-' + (current.getMonth() + 1) + '-'; //年月
                            const start = new Date();
                            const end = new Date();
                            start.setTime(new Date(month + start_day).getTime());
                            end.setTime(new Date(month + end_day + ' 23:59:59').getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    }
                ]
            },
        }
    },

    created() {
        this.init1();
    },
    mounted() {
        this.initChart();
    },
    methods: {
        init() {
            clientCount(this.form).then((res) => {
                this.dataList = res.data;
                this.initChart();
            });
        },
        init1() {
            // 获取当天开始时间
            const start = new Date();
            start.setHours(0, 0, 0, 0);
            // 获取当天结束时间
            const end = new Date();
            end.setHours(23, 59, 59, 999);
            // 格式化日期时间
            this.todayStart = this.formatDateTime(start);
            this.todayEnd = this.formatDateTime(end);
            getAssistant().then((res) => {
                this.assistantData = res.data.userlist;
                for (let i = 0; i < this.assistantData.length; i++) {
                    if (res.data.userid === this.assistantData[i]['userid']) {
                        this.form.assistant = res.data.userid;
                        break;
                    } else {
                        this.form.assistant = this.assistantData[0]['userid'];
                    }
                }
                this.form.createTime = [this.todayStart, this.todayEnd];
                this.init();
                this.loadinggroup = false;
            });
        },
        search: function () {
            this.form.type = true;
            this.init();
        },
        search1: function () {
            this.form.assistant = '';
            this.form.type = false;
            clientCount(this.form).then((res) => {
                this.dataList = res.data;
                this.initChart();
            });
        },
        refresh: function () {
            this.init1();
        },
        currentDate() {
            const now = new Date();
            const year = now.getFullYear();
            const month = (now.getMonth() + 1).toString().padStart(2, '0');
            const day = now.getDate().toString().padStart(2, '0');
            return `${year}-${month}-${day}`;
        },
        initChart() {
            const chartDom = this.$refs.trendChart;
            const myChart = echarts.init(chartDom);
            const option = {
                title: {
                    text: '趋势图'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['客户总数', '新增客户数', '流失客户数', '删除客户数']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: this.dataList.times,
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '客户总数',
                        type: 'line',
                        data: this.dataList.zkcount,
                    },
                    {
                        name: '新增客户数',
                        type: 'line',
                        data: this.dataList.zxcount,
                    },
                    {
                        name: '流失客户数',
                        type: 'line',
                        data: this.dataList.zlcount,
                    },
                    {
                        name: '删除客户数',
                        type: 'line',
                        data: this.dataList.sccount,
                    }
                ]
            };
            myChart.setOption(option);
        },
        formatDateTime(date) {
            return (
                date.getFullYear() +
                '-' +
                ('0' + (date.getMonth() + 1)).slice(-2) +
                '-' +
                ('0' + date.getDate()).slice(-2) +
                ' ' +
                ('0' + date.getHours()).slice(-2) +
                ':' +
                ('0' + date.getMinutes()).slice(-2) +
                ':' +
                ('0' + date.getSeconds()).slice(-2)
            );
        }
    }
};
</script>

<style lang="scss" scoped>
.header_top {
    padding: 15px;
    border-bottom: 1px #cccccc solid;
}

.mark_head {
    position: relative;
    padding-left: 12px;
    border-left: 4px #e6533c solid;
}

.ant-card-head {
    color: rgba(0, 0, 0, .85);
    font-weight: 500;
    font-size: 16px;
}

.time {
    color: #999;
    font-size: 12px;
    margin-left: 20px;
}

.screen_data {
    padding: 0 10px;
    margin: 10px 0;
}

.flex-column {
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column;
}

.item-box {
    border-radius: 8px;
    padding: 20px 16px;
    border: 1px solid rgba(0, 0, 0, .06);
    height: 170px;
    color: #333;
    background: #fcfcfc;
    box-sizing: border-box;

    img {
        width: 42px;
        height: 42px;
        display: block;
    }

    .flex-column-center {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .flex {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-direction: normal;
        -webkit-box-orient: horizontal;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .t1 {
        font-size: 13px;
        font-weight: 500;
        margin: 12px 0;
    }

    .t2 {
        font-size: 22px;
        font-weight: 700;
    }
}
</style>